<template>
  <div>
    <BaseEchart :echart-options="options" />
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  name: String,
  pieCenter: {
    type: Array,
    default: () => ['50%', '50%']
  }
})

const options = computed(() => {
  const data = props.data || []
  const total = data?.reduce((prev, { value }) => prev + +value, 0)
  return {
    title: {},
    tooltip: {
      trigger: 'item'
    },
    // 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
    legend: {
      type: 'scroll',
      orient: 'vertical', // 改变排列方向
      right: 0,
      bottom: 10,
      icon: 'circle',
      // 使用回调函数
      formatter: function (name) {
        let str = name
        for (const key in data) {
          const obj = data[key]
          if (name == obj.name) {
            const value = obj.value || 0
            let rate = (value / total || 0) * 100
            try {
              rate = rate?.toFixed(1)
            } catch (error) {
              console.log(error)
            }
            str += `(${value})件 ` + rate + '%'
            break
          }
        }
        return str
      }
    },
    // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
    toolbox: {},
    series: [
      {
        name: props.name,
        type: 'pie',
        radius: '50%',
        center: props.pieCenter,
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})
</script>
